<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="author" content="Jiaqi Ding">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product</title>
    <link rel="stylesheet" href="css/Ass1.css">
</head>
<header>
    <div class="logo">
        <img src="imgs/logo.jpg" alt="liveheart logo">
    </div>
    <nav>
      <ul>
        <li><a href="index.html">HOMEPAGE</a></li>
        <li><a href="product.html">PRODUCTION</a></li>
        <li><a href="login.html">LOGIN</a></li>
        <li><a href="register.html">REGISTRATION</a></li>
        <li><a href="#">SHOPPING CART</a></li>
        <li><a href="about.html">ABOUT</a></li>
      </ul>
    </nav>
  </header>
<body>
    <div class="products">
        <div class="productsLine">
            <div class="picture">
                <img class="overview" src="imgs/product1_1.jpg" alt="Little Dinosaur Party">
                <div class="colorChoice">
                    <ul>
                       <li><img src="imgs/product1_2.jpg" alt="Green Little Dinosaur"></li>
                       <li><img src="imgs/product1_3.jpg" alt="Orange Little Dinosaur"></li>
                       <li><img src="imgs/product1_4.jpg" alt="Blue Little Dinosaur"></li>
                    </ul>  
                </div>
            </div> 
            <div class="content">
                <h2>Forest Roommate Party</h2>
                <div class="basicContent">
                    <p></p>
                    <span class="price">$10</span>
                    <p></p>
                    <p class="text">Internal filling: Down Cotton</p>
                    <p class="text">Color Choice</p>
                    <p class="text">Green Blue Orange</p>
                    </div>
                    <div>
                        <button id="clickButton1" class="clickButton" data-content="expandedContent1">More Information</button>
                    </div>  
                    <div class="expandedContent" id="expandedContent1" style="display: none;">  
                        <p>The cartoon images of this product are different forest animal images such as dinosaurs, triceratops, and ctylosaurus (under continuous update). We use high-quality down cotton filling to make the doll more stretchable. Suitable for personal use or as a gift for others.</p>  
                    </div>
                </div>
            </div>   
        </div>

        <div class="productsLine">
            <div class="picture">
                <img class="overview" src="imgs/product2_1.jpg" alt="Poodle Pillow">
                <div class="colorChoice">
                    <ul>
                       <li><img src="imgs/product2_2.jpg" alt="White Poodle"></li>
                       <li><img src="imgs/product2_3.jpg" alt="Light Gray Poodle"></li>
                       <li><img src="imgs/product2_4.jpg" alt="Brown Poodle"></li>
                    </ul>  
                </div>
            </div> 
            <div class="content">
                <h2>Poodle Pillow</h2>
                <div class="basicContent">
                    <p></p>
                    <span class="price">$22</span>
                    <p></p>
                    <p class="text">Internal filling: Down Cotton</p>
                    <p class="text">Color Choice</p>
                    <p class="text">White Light-Gray Brown</p>
                    </div>
                    <div>
                        <button id="clickButton2" class="clickButton" data-content="expandedContent2">More Information</button>
                    </div>  
                    <div class="expandedContent" id="expandedContent2" style="display: none;">  
                        <p>This doll is modeled based on a cute poodle and is suitable for customers over 3 years old. Filled with down cotton, it provides customers with the best tactile experience and can provide warmth and companionship to every buyer.</p>  
                    </div>
                </div>
            </div>   
        </div>

        <div class="productsLine">
            <div class="picture">
                <img class="overview" src="imgs/product3_1.jpg" alt="Sparrow Doll">
                <div class="colorChoice">
                    <ul>
                       <li><img src="imgs/product3_2.jpg" alt="Silver Throated Sparrow/KOYU"></li>
                       <li><img src="imgs/product3_3.jpg" alt="(Purple)Fox/RINA"></li>
                       <li><img src="imgs/product3_4.jpg" alt="(Yellow)Civet cat/DINA"></li>
                    </ul>  
                </div>
            </div> 
            <div class="content">
                <h2>Poodle Pillow</h2>
                <div class="basicContent">
                    <p></p>
                    <span class="price">$22</span>
                    <p></p>
                    <p class="text">Internal filling: Down Cotton</p>
                    <p class="text">Color Choice</p>
                    <p class="text">Silver Throated Sparrow/KOYU</p>
                    <p class="text">(Purple)Fox/RINA</p>
                    <p class="text">(Yellow)Civet cat/DINA</p>
                    </div>
                    <div>
                        <button id="clickButton3" class="clickButton" data-content="expandedContent3">More Information</button>
                    </div>  
                    <div class="expandedContent" id="expandedContent3" style="display: none;">  
                        <p>The doll has a round appearance and the outer fabric is made of elastic velvet, making it visually more adorable and highly ornamental. The series is currently considering creating dolls featuring weasels and anteaters.</p>  
                    </div>
                </div>
            </div>  
        </div>

        <div class="productsLine">
            <div class="picture">
                <img class="overview" src="imgs/product4_1.jpg" alt="Devil fish">
                <div class="colorChoice">
                    <ul>
                       <li><img src="imgs/product4_2.jpg" alt="Purple Devil fish"></li>
                       <li><img src="imgs/product4_3.jpg" alt="Blue Devil fish"></li>
                    </ul>  
                </div>
            </div> 
            <div class="content">
                <h2>Devil fish</h2>
                <div class="basicContent">
                    <p></p>
                    <span class="price">$26</span>
                    <p></p>
                    <p class="text">Internal filling: Down Cotton</p>
                    <p class="text">Color Choice</p>
                    <p class="text">Purple Blue</p>
                    </div>
                    <div>
                        <button id="clickButton4" class="clickButton" data-content="expandedContent4">More Information</button>
                    </div>  
                    <div class="expandedContent" id="expandedContent4" style="display: none;">  
                        <p>This series belongs to the Marine Biology series (continuously updated). Suitable for customers over 3 years old (please note when using for children under 3 years old). The face of the Devil Fish looks more like a smile in design, representing our brand's hope that customers can remember to smile and maintain a good mood when they are sad.</p>  
                    </div>
                </div>
            </div>   
        </div>

        <div class="productsLine">
            <div class="picture">
                <img class="overview" src="imgs/product5_1.jpg" alt="Lifu Sheep Series">
                <div class="colorChoice">
                    <ul>
                       <li><img src="imgs/product5_2.jpg" alt="Pink sheep"></li>
                       <li><img src="imgs/product5_3.jpg" alt="Blue-white sheep"></li>
                    </ul>  
                </div>
            </div> 
            <div class="content">
                <h2>Lifu Sheep Series</h2>
                <div class="basicContent">
                    <p></p>
                    <span class="price">$14</span>
                    <p></p>
                    <p class="text">Internal filling: Down Cotton</p>
                    <p class="text">Color Choice</p>
                    <p class="text">Pink Blue-white</p>
                    </div>
                    <div>
                        <button id="clickButton5" class="clickButton" data-content="expandedContent5">More Information</button>
                    </div>  
                    <div class="expandedContent" id="expandedContent5" style="display: none;">  
                        <p>Design background</p>
                        <p>"MAPLE" are coming from the COUNTRY OF SLEEP. Their Fur is just too comfortable, and they can't help each other to sleep when they are all together. MAPLE will take us to the sleeping world.</p>  
                    </div>
                </div>
            </div>   
        </div>
    </div>
    <script src="js/product.js"></script>
</body>
</html>